<template>
	<div class="wrap">
		<SearchNavHead v-model:searchMsgCard="searchMsgCard" @get-res="getSearchResult" />

		<!-- 留言展示 -->
		<el-space :wrap="true" :size="20">
			<template v-for="item in msgList" :key="item">
				<MessageCard
					:msg-id="item.msgId"
					:containt="item.content"
					:time="item.createTime"
					:title="getTitle(item)"
					:stu-id="item.stuId"
					@change-status="handleCHngeStatus">
					<template #btn>
						<div class="footer">
							<p :style="functionColor(item)">{{ item.readStatus }}</p>
							<el-button link type="warning" @click="handleDelClick(item)">删除</el-button>
						</div>
					</template>
				</MessageCard>
			</template>
		</el-space>

		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>
	</div>
</template>

<script setup>
import SearchNavHead from '@/components/mod/SearchNavHead.vue'
import MessageCard from '@/components/mod/MessageCard.vue'
import { queryAllMessage, deleteMessageInfoByHou } from '@/utils/axios/domiRequests'
import { getMessageInfoBuild } from '@/utils/axios/getTotal'
import { onMounted, reactive, ref, watch } from 'vue'

const searchMsgCard = reactive({ stuId: '' })

const currentPage = ref(1)
const pageSize = ref()
const pageSizes = ref([])
const total = ref(0)
// 留言列表
const msgList = ref([])

const getTitle = (item) => {
	return item.buildId + '栋-' + item.dorNumber + '房间-' + item.stuName
}

// 监听搜索结果
const getSearchResult = (val) => {
	msgList.value = val
}

// 删除留言
const handleDelClick = async (val) => {
	await deleteMessageInfoByHou({ msgId: val.msgId })
	init()
}

// 更新阅读状态事件
const handleCHngeStatus = async (val) => {
	let { data } = await queryAllMessage({ currentPage: currentPage.value, pageSize: pageSize.value })
	msgList.value = data
}

const handleSizeChange = async (val) => {
	let { data } = await queryAllMessage({ currentPage: currentPage.value, pageSize: val })
	msgList.value = data
}

const handleCurrentChange = async (val) => {
	let { data } = await queryAllMessage({ currentPage: val, pageSize: pageSize.value })
	msgList.value = data
}

const functionColor = (val) => (val.readStatus == '未查阅' ? { color: 'red' } : { color: '#ccc' })

async function init() {
	let { data } = await queryAllMessage({ currentPage: currentPage.value, pageSize: pageSize.value })
	let res = await getMessageInfoBuild()
	total.value = res.data
	msgList.value = data
}
onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
.footer {
	display: flex;
	justify-content: space-between;
}
.el-row {
	gap: 20px;
}

.pagination {
	position: absolute;
}
</style>
